<template>
  <mall
    nav-bgcolor="#ff6600"
    use-toggle
  >
    <view slot="nav">
      <search-bar placeholder="请输入搜索关键词" />
    </view>
    <div slot="page">
      <swiper
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
        circular
        previous-margin="10px"
        next-margin="10px"
        class="swiper-corner"
      >
        <swiper-item
          v-for="(item,index) in swipers"
          :key="index"
          class="swiper-corner-item"
        >
          <view class="swiper-item">
            <image
              :src="item.thumb"
              mode="aspectFill"
            />
            <div :class="item.class">
              {{item.title}}
            </div>
          </view>
        </swiper-item>
      </swiper>

      <div
        class="user-header"
        :style="headerStyle"
      >
        <van-cell-group :border="false">
          <van-cell
            :icon="avatar"
            :border="false"
            custom-class="user-header-avatar"
            value-class="user-header-avatar__value"
          >
            <div class="vip-badge">
              <van-icon name="/static/icons/crown.png" />
              <span>VIP会员</span>
            </div>
          </van-cell>
          <van-cell
            label="这家伙很懒，什么都没有写~"
            is-link
            url="/pages/index/main"
            :clickable="false"
            :border="false"
            value-class="user-header-text__value"
          >
            <view slot="title">
              <view class="user-header-text__username">
                <span>{{username}}</span>
                <van-icon
                  :name="genderIcon"
                  v-if="genderIcon"
                />
              </view>
            </view>
          </van-cell>
        </van-cell-group>
        <div class="user-stats">
          <div
            class="user-stats-item"
            v-for="(item,index) in stats"
            :key="index"
          >
            <div class="user-stats-item__number">{{item.number}}</div>
            <div class="user-stats-item__text">{{item.text}}</div>
          </div>
        </div>
      </div>

      <van-cell
        center
        title="帐号绑定手机号可以提升安全性哦~"
        custom-class="user-notice"
      >
        <van-button
          plain
          round
          color="#ff3264"
          size="mini"
          @click="onBind"
        >去绑定</van-button>
        <van-icon
          slot="right-icon"
          name="cross"
          class="custom-icon"
        />
      </van-cell>
      <div class="user-body">
        <van-grid :border="false">
          <van-grid-item
            icon="/static/icons/message.png"
            text="消息"
          />
          <van-grid-item
            icon="/static/icons/shop.png"
            text="订单"
          />
          <van-grid-item
            icon="/static/icons/dangan.png"
            text="报名"
            link-type="navigateTo"
            url="/pages/enroll/enlist/main"
          />
          <van-grid-item
            icon="/static/icons/star.png"
            text="收藏"
          />
        </van-grid>

        <van-cell-group>
          <van-cell
            icon="user-o"
            title="参赛人信息"
            value="未设置"
            size="large"
            is-link
          />
          <van-cell
            icon="hotel-o"
            title="团体组织"
            size="large"
            is-link
          />
          <van-cell
            icon="flower-o"
            title="精彩瞬间"
            size="large"
            is-link
          />
          <van-cell
            icon="clock-o"
            title="浏览历史"
            value="9"
            size="large"
            is-link
          />
        </van-cell-group>
        <van-cell-group>
          <van-cell
            icon="share"
            title="邀请好友"
            size="large"
            is-link
          />
          <van-cell
            icon="setting-o"
            title="设置"
            value="内容"
            is-link
            size="large"
            :border="false"
          />
        </van-cell-group>
        <van-cell-group>
          <van-cell
            icon="user-o"
            title="参赛人信息"
            value="未设置"
            size="large"
            is-link
          />
          <van-cell
            icon="hotel-o"
            title="团体组织"
            size="large"
            is-link
          />
          <van-cell
            icon="flower-o"
            title="精彩瞬间"
            size="large"
            is-link
          />
          <van-cell
            icon="clock-o"
            title="浏览历史"
            value="9"
            size="large"
            is-link
          />
        </van-cell-group>
        <van-cell-group>
          <van-cell
            icon="user-o"
            title="参赛人信息"
            value="未设置"
            size="large"
            is-link
          />
          <van-cell
            icon="hotel-o"
            title="团体组织"
            size="large"
            is-link
          />
          <van-cell
            icon="flower-o"
            title="精彩瞬间"
            size="large"
            is-link
          />
          <van-cell
            icon="clock-o"
            title="浏览历史"
            value="9"
            size="large"
            is-link
          />
        </van-cell-group>
        <van-cell-group>
          <van-cell
            icon="user-o"
            title="参赛人信息"
            value="未设置"
            size="large"
            is-link
          />
          <van-cell
            icon="hotel-o"
            title="团体组织"
            size="large"
            is-link
          />
          <van-cell
            icon="flower-o"
            title="精彩瞬间"
            size="large"
            is-link
          />
          <van-cell
            icon="clock-o"
            title="浏览历史"
            value="9"
            size="large"
            is-link
          />
        </van-cell-group>
      </div>
    </div>
  </mall>
</template>

<script>
import { formatStyles } from '@/utils'
import Mall from '@/components/layout/mall'
import TitleBar from '@/components/bar/title'
import SearchBar from '@/components/bar/search'
export default {
  components: {
    Mall,
    TitleBar,
    SearchBar
  },

  data () {
    return {
      title: 'EMHOME',
      username: 'EMHOME',
      gender: 2,
      avatar: 'http://oss.youmbe.com/attachments/avatar/06.jpg',
      cover: 'http://oss.youmbe.com/assets/ucenter/background.jpg',
      stats: [
        {
          text: '获赞',
          number: 0
        },
        {
          text: '粉丝',
          number: 0
        },
        {
          text: '关注',
          number: 0
        }
      ],
      titleColor: '#000000',
      navBackgroundColor: '#ff6600',
      value: '',
      swipers: [
        {
          title: '',
          description: '',
          thumb: 'http://oss.youmbe.com/attachments/temp/swiper/01.png',
          class: 'demo-text-1'
        },
        {
          title: '',
          description: '',
          thumb: 'http://oss.youmbe.com/attachments/temp/swiper/02.png',
          class: 'demo-text-3'
        },
        {
          title: '',
          description: '',
          thumb: 'http://oss.youmbe.com/attachments/temp/swiper/03.png',
          class: 'demo-text-3'
        }
      ],
      indicatorDots: true,
      vertical: false,
      autoplay: false,
      interval: 2000,
      duration: 500
    }
  },

  computed: {
    headerStyle () {
      if (this.cover) {
        return formatStyles({
          backgroundImage: `url('` + this.cover + `')`
        })
      }
      return ''
    },
    genderIcon () {
      if (this.gender === 1) {
        return '/static/icons/male.png'
      } else if (this.gender === 2) {
        return '/static/icons/female.png'
      }
      return ''
    }
  },

  created () {
    console.log('user/index created')
  },
  methods: {
    onBind () {
      wx.navigateTo({
        url: '/pages/bind/main'
      })
    }
  }
}
</script>

<style lang="less">

.user-container {
  background: #f7f7f7;
}

.user {
  &-header {
    padding-top: 64px;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    .van-cell {
      background: transparent !important;
      color: #fff;
      &__left-icon-wrap {
        font-size: 64px !important;
        border-radius: 100%;
        box-sizing: border-box;
        border: 2px solid rgba(255, 255, 255, 0.9);
      }
      .van-icon__image {
        border-radius: 100%;
      }
      &__label {
        color: rgba(255, 255, 255, 0.5) !important;
      }
      &__right-icon-wrap {
        color: rgba(255, 255, 255, 0.5) !important;
        align-self: flex-end;
      }
    }
    &-text__username {
      font-size: 20px;
      display: flex;
      align-items: center;
      .van-icon {
        font-size: 16px !important;
        margin-left: 3px;
      }
    }
    &-avatar {
      padding-right: 0 !important;
      &__value {
        padding-top: 10px;
        .vip-badge {
          display: inline-flex;
          align-items: center;
          background: rgba(0, 0, 0, 0.2);
          border-radius: 20px 0 0 20px;
          padding: 5px;
          color: #fff;
          .van-icon {
            margin-right: 5px;
          }
        }
      }
    }
  }
  &-notice {
    padding: 6px 15px !important;
    font-size: 12px !important;
    background: rgba(255, 50, 100, 0.1) !important;
    color: rgba(255, 50, 100, 0.9) !important;
    .van-cell__value {
      flex: none !important;
    }
    .van-button {
      display: block !important;
      margin-right: 10px;
      background-color: transparent !important;
    }
  }
  &-body {
    .van-grid-item__icon {
      font-size: 30px;
    }
    .van-grid-item__text {
      margin-top: 5px;
    }
    .van-cell-group {
      margin-top: 15px;
    }
  }
  &-stats {
    display: flex;
    align-items: center;
    padding: 0 15px 10px;
    &-item {
      display: inline-flex;
      margin-right: 10px;
      align-items: center;
      &__number {
        color: #fff;
        font-size: 14px;
        margin-right: 3px;
      }
      &__text {
        color: rgba(255, 255, 255, 0.8);
        font-size: 12px;
      }
    }
  }
}
</style>
